<template>
  <div>
    <div class="listItem">
      <div>{{ num }}</div>
      <div>
        <el-radio-group v-model="item1" @change="kindsChange">
          <el-radio label="优惠券">优惠券</el-radio>
          <el-radio label="商品/服务">商品/服务</el-radio>
        </el-radio-group>
      </div>
      <div
        @click="popShopServeVisible = true"
        v-show="this.item1 == '商品/服务'"
        class="giftNameDetail"
      >
        点击搜索服务/商品
      </div>
      <div
        @click="popDiscountVisible = true"
        v-show="this.item1 == '优惠券'"
        class="giftNameDetail"
      >
        点击选择优惠券
      </div>
      <div>
        <el-input-number
          size="mini"
          v-model="item1Num"
          @change="handleChange"
          :min="0"
        ></el-input-number>
      </div>
      <div style="text-align: center;position:relative">
        <el-input 
        v-model="item1probability" 
        style="width:60%;"
        type="number"
        @change="probabilityChange"
        ></el-input>
        <span class="probabilityIcon">%</span>
      </div>
    </div>
    <!-- 编辑优惠券弹窗 -->
    <div class="popTypeOne">
      <el-dialog :visible.sync="popDiscountVisible" title="编辑优惠券" center>
        <div class="popSetDiscount">
          <div class="popDiscountLeft">
            <div class="searchDiscountInputDiv">
              <el-input
                v-model="searchDiscount"
                placeholder="搜索优惠券"
              ></el-input>
            </div>
            <div class="checkListDiv">
              <el-checkbox-group v-model="checkList" @change="checkListChange">
                <div
                  class="elcheckbox"
                  v-for="(item, index) in searchDiscountList"
                  :key="index"
                >
                  <el-checkbox :label="item">{{ item }}</el-checkbox>
                </div>
              </el-checkbox-group>
            </div>
            <div class="footerButton">
              <el-button plain @click="goToCreateBtn">去创建</el-button>
            </div>
          </div>
          <div class="popDiscountRight">
            <div class="checkedTitle">
              已选项<span style="margin-left:6px">{{ checkList.length }}</span>
            </div>
            <div class="checkedList">
              <div v-for="(item, index) in checkList" :key="item">
                {{ item }}
                <i class="el-icon-close" @click="delChecked(item, index)"></i>
              </div>
            </div>
            <div class="footerButton">
              <el-button plain @click="popDiscountVisible = false"
                >取消</el-button
              >
              <el-button type="primary" @click="discountEnSure">确认选择</el-button>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
    <!-- 商品/服务弹窗 -->
    <div class="popTypeTwo">
      <el-dialog :visible.sync="popShopServeVisible" center :show-close="false">
        <div class="popShopServeLeft">
          <el-tabs
            v-model="popShopServeActive"
            @tab-click="popShopServeClick"
            :stretch="true"
          >
            <el-tab-pane label="服务" name="服务">
              <el-menu
                default-active="00"
                class="el-menu-vertical-demo"
                :unique-opened="true"
                style="width:30%"
                @select="changeSelect"
              >
                <el-submenu
                  :index="oneindex.toString()"
                  v-for="(oneitem, oneindex) in serveData"
                  :key="oneindex"
                >
                  <template slot="title">
                    <span>{{ oneitem.name }}</span>
                  </template>
                  <el-menu-item
                    :index="oneindex.toString() + twoindex.toString()"
                    v-for="(twoitem, twoindex) in serveData[oneindex].children"
                    :key="twoindex"
                    >{{ twoitem.name }}</el-menu-item
                  >
                </el-submenu>
              </el-menu>
              <el-table
                ref="multipleServe"
                :data="serveData[keyPath[0]].children[keyPath[1]].children"
                tooltip-effect="dark"
                style="width: 70%"
                @selection-change="handleSelectionChange"
              >
                <el-table-column prop="name" label="名称" width="150">
                </el-table-column>
                <el-table-column prop="price" label="价格" width="75">
                </el-table-column>
                <el-table-column type="selection" prop="selected" width="75">
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="商品" name="商品">
              <el-menu
                default-active="00"
                class="el-menu-vertical-demo"
                :unique-opened="true"
                style="width:30%"
                @select="changeSelectshop"
              >
                <el-submenu
                  :index="oneindex.toString()"
                  v-for="(oneitem, oneindex) in shopData"
                  :key="oneindex"
                >
                  <template slot="title">
                    <span>{{ oneitem.name }}</span>
                  </template>
                  <el-menu-item
                    :index="oneindex.toString() + twoindex.toString()"
                    v-for="(twoitem, twoindex) in shopData[oneindex].children"
                    :key="twoindex"
                    >{{ twoitem.name }}</el-menu-item
                  >
                </el-submenu>
              </el-menu>
              <el-table
                ref="multipleShop"
                :data="
                  shopData[keyPathshop[0]].children[keyPathshop[1]].children
                "
                tooltip-effect="dark"
                style="width: 70%"
                @selection-change="handleSelectionChangeShop"
              >
                <el-table-column prop="name" label="名称" width="150">
                </el-table-column>
                <el-table-column prop="price" label="价格" width="75">
                </el-table-column>
                <el-table-column type="selection" prop="selected" width="75">
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
        <div class="popShopServeRight">
          <div class="popShopServeRightHead">
            已选项目({{ selectedItemServe.length + selectedItemShop.length }})
            <div
              class="el-icon-circle-close closeIcon"
              @click="popShopServeVisible = false"
            ></div>
          </div>
          <div
            v-for="item in selectedItemServe"
            :key="item.name"
            class="selectedItem"
          >
            <div>【服务】{{ item.name }}</div>
            <div class="del" @click="delServeItem(item.keyPath)">
              <div class="el-icon-close"></div>
            </div>
          </div>
          <div
            v-for="item in selectedItemShop"
            :key="item.name"
            class="selectedItem"
          >
            <div>【商品】{{ item.name }}</div>
            <div class="del" @click="delShopItem(item.keyPath)">
              <div class="el-icon-close"></div>
            </div>
          </div>
          <div class="twoBtn">
            <el-button @click="popShopServeVisible = false">取消</el-button>
            <el-button type="primary" @click="serveShopEnSure">确定</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  props: ["num", "vip"],
  data() {
    return {
      name: "", //本地存储的名字
      thanks: "", //谢谢参与概率
      item1: "优惠券",
      item1Num: "",
      item1probability: "",
      popShopServeVisible: false, //商品和服务弹窗开关
      popDiscountVisible: false, //优惠券编辑弹窗开关
      searchDiscount: "", //查询优惠券
      checkList: [], //已选中优惠券列表，
      popShopServeActive: "服务", //商品和服务弹窗中的Tab切换
      keyPath: ["0", "0"], //左侧导航栏激活的下标['serveData第一层下标','serveData第二层下标']
      keyPathshop: ["0", "0"], //商品的
      discountList: [
        "5元抵扣券",
        "10元抵扣券",
        "15元抵扣券",
        "20元抵扣券",
        "25元抵扣券",
        "30元抵扣券",
      ],
      serveData: [
        //三级选项数据
        {
          name: "洗车",
          children: [
            {
              name: "精洗",
              children: [
                {
                  name: "洗车会员卡",
                  price: "300",
                  selected: false,
                },
                {
                  name: "会员精致洗车",
                  price: "300",
                  selected: false,
                },
                {
                  name: "会员洗车",
                  price: "3300",
                  selected: false,
                },
              ],
            },
            {
              name: "普洗",
              children: [
                {
                  name: "洗车普洗",
                  price: "300",
                  selected: false,
                },
                {
                  name: "会员精致普洗",
                  price: "200",
                  selected: false,
                },
              ],
            },
          ],
        },
        {
          name: "打蜡",
          children: [
            {
              name: "精打",
              children: [
                {
                  name: "打蜡会员卡",
                  price: "300",
                  selected: false,
                },
                {
                  name: "会员精致打蜡",
                  price: "300",
                  selected: false,
                },
              ],
            },
            {
              name: "普打",
              children: [
                {
                  name: "洗车普打",
                  price: "300",
                  selected: false,
                },
                {
                  name: "会员精致普打",
                  price: "200",
                  selected: false,
                },
              ],
            },
          ],
        },
        {
          name: "33",
          children: [
            {
              name: "精打33",
              children: [
                {
                  name: "打蜡会员卡33",
                  price: "300",
                  selected: false,
                },
                {
                  name: "会员精致打蜡33",
                  price: "300",
                  selected: false,
                },
              ],
            },
            {
              name: "普打33",
              children: [
                {
                  name: "洗车普打33",
                  price: "300",
                  selected: false,
                },
                {
                  name: "会员精致普打33",
                  price: "200",
                  selected: false,
                },
              ],
            },
          ],
        },
      ],
      shopData: [
        {
          name: "高级服务",
          children: [
            {
              name: "高级服务0",
              children: [
                {
                  name: "高级服务0-0-0",
                  price: "300",
                  selected: false,
                },
                {
                  name: "高级服务0-0-1",
                  price: "300",
                  selected: false,
                },
                {
                  name: "高级服务0-0-2",
                  price: "3300",
                  selected: false,
                },
                {
                  name: "高级服务0-0-3",
                  price: "6600",
                  selected: false,
                },
              ],
            },
            {
              name: "高级服务1",
              children: [
                {
                  name: "高级服务0-1-0",
                  price: "300",
                  selected: false,
                },
                {
                  name: "高级服务0-1-1",
                  price: "200",
                  selected: false,
                },
              ],
            },
          ],
        },
        {
          name: "成长服务",
          children: [
            {
              name: "成长服务0",
              children: [
                {
                  name: "成长服务0-0-0",
                  price: "300",
                  selected: false,
                },
                {
                  name: "成长服务0-0-1",
                  price: "300",
                  selected: false,
                },
                {
                  name: "成长服务0-0-2",
                  price: "3300",
                  selected: false,
                },
                {
                  name: "成长服务0-0-3",
                  price: "6600",
                  selected: false,
                },
              ],
            },
            {
              name: "成长服务1",
              children: [
                {
                  name: "成长服务0-1-0",
                  price: "300",
                  selected: false,
                },
                {
                  name: "成长服务0-1-1",
                  price: "200",
                  selected: false,
                },
              ],
            },
          ],
        },
      ],
    };
  },
  computed: {
    searchDiscountList() {
      if (this.searchDiscount == "") {
        return this.discountList;
      } else {
        return this.discountList.filter((item) => {
          return item.indexOf(this.searchDiscount) != -1;
        });
      }
    },
    selectedItemServe() {
      let arr = [];
      this.serveData.forEach((oneItem, oneIndex) => {
        oneItem.children.forEach((twoItem, twoIndex) => {
          twoItem.children.forEach((item, index) => {
            if (item.selected) {
              item.keyPath = [oneIndex, twoIndex, index];
              arr.push(item);
            }
          });
        });
      });
      return arr;
    },
    selectedItemShop() {
      let arr = [];
      this.shopData.forEach((oneItem, oneIndex) => {
        oneItem.children.forEach((twoItem, twoIndex) => {
          twoItem.children.forEach((item, index) => {
            if (item.selected) {
              item.keyPath = [oneIndex, twoIndex, index];
              arr.push(item);
            }
          });
        });
      });
      return arr;
    },
  },
  methods: {
    //点击去创建按钮
    goToCreateBtn(){
      console.log("goToCreateBtn")
				this.$router.push({
					path:"/creatCoupon"
				})
    },
    //每次‘优惠券’与‘商品/服务’切换触发
    kindsChange() {
      let obj = JSON.parse(localStorage.getItem(this.name));
      obj.type=this.item1;
      localStorage.setItem(this.name, JSON.stringify(obj));
      console.log(JSON.parse(localStorage.getItem(this.name)))
    },
    //每次优惠券列表发生变化触发
    checkListChange() {
      console.log(this.checkList);
    },
    //删除已选中的优惠券
    delChecked(name, index) {
      let length = this.checkList.length;
      for (length; length >= 0; length--) {
        if (this.checkList[length] == name) {
          this.checkList.splice(length, 1);
        }
      }
    },
    //商品和服务弹窗中的Tab切换时间
    popShopServeClick() {
      console.log(this.popShopServeActive);
    },
    //
    shopServeChange() {
      console.log("shopServeChange");
    },
    //获得左侧导航栏激活的下标
    changeSelect(key, keyPath) {
      console.log(keyPath);
      if (keyPath[1].length != 1) {
        keyPath[1] = keyPath[1].split("")[1];
      }
      if (this.keyPath == keyPath) {
        return;
      }
      this.keyPath = keyPath;
      let arr = [];
      //获取当前已经选中的商品
      this.serveData[this.keyPath[0]].children[
        this.keyPath[1]
      ].children.forEach((item) => {
        if (item.selected) {
          arr.push(item);
        }
      });
      //异步调用ElmentUI table的方法把选中样式进行绑定
      //这里不能同步调用，因为当我们左边导航栏选择会改变table中的数据触发更新
      setTimeout(() => {
        arr.forEach((row) => {
          this.$refs.multipleServe.toggleRowSelection(row);
        });
      }, 0);
    },
    changeSelectshop(key, keyPath) {
      console.log(keyPath);
      if (keyPath[1].length != 1) {
        keyPath[1] = keyPath[1].split("")[1];
      }
      if (this.keyPathshop == keyPath) {
        return;
      }
      this.keyPathshop = keyPath;
      let arr = [];
      //获取当前已经选中的商品
      this.shopData[this.keyPathshop[0]].children[
        this.keyPathshop[1]
      ].children.forEach((item) => {
        if (item.selected) {
          arr.push(item);
        }
      });
      //异步调用ElmentUI table的方法把选中样式进行绑定
      //这里不能同步调用，因为当我们左边导航栏选择会改变table中的数据触发更新
      setTimeout(() => {
        arr.forEach((row) => {
          this.$refs.multipleShop.toggleRowSelection(row);
        });
      }, 0);
    },
    //当服务选择发生改变触发
    handleSelectionChange(val) {
      let valLenght = val.length;
      //先全部不选进行初始化
      this.serveData[this.keyPath[0]].children[
        this.keyPath[1]
      ].children.forEach((element) => {
        element.selected = false;
      });
      //如果没有进行选择，就退出
      if (valLenght == 0) {
        return;
      }
      //选择的和该列表在进行比较赋值
      this.serveData[this.keyPath[0]].children[
        this.keyPath[1]
      ].children.forEach((element) => {
        val.forEach((item) => {
          if (element.name == item.name) {
            element.selected = true;
          }
        });
      });
    },
    //当商品选择发生改变触发
    handleSelectionChangeShop(val) {
      console.log(val);
      let valLenght = val.length;
      //先全部不选进行初始化
      this.shopData[this.keyPathshop[0]].children[
        this.keyPathshop[1]
      ].children.forEach((element) => {
        element.selected = false;
      });
      //如果没有进行选择，就退出
      if (valLenght == 0) {
        return;
      }
      //选择的和该列表在进行比较赋值
      this.shopData[this.keyPathshop[0]].children[
        this.keyPathshop[1]
      ].children.forEach((element) => {
        val.forEach((item) => {
          if (element.name == item.name) {
            element.selected = true;
          }
        });
      });
    },
    //删除右侧已选项服务
    delServeItem(itemkeyPath) {
      console.log(itemkeyPath);
      this.serveData[itemkeyPath[0]].children[itemkeyPath[1]].children[
        itemkeyPath[2]
      ].selected = false;
      //异步调用ElmentUI table的方法把选中样式进行绑定
      setTimeout(() => {
        //获取当前已经选中的商品
        this.$refs.multipleServe.toggleRowSelection(
          this.serveData[itemkeyPath[0]].children[itemkeyPath[1]].children[
            itemkeyPath[2]
          ]
        );
      }, 0);
    },
    //删除右侧已选项商品
    delShopItem(itemkeyPath) {
      console.log(itemkeyPath);
      this.shopData[itemkeyPath[0]].children[itemkeyPath[1]].children[
        itemkeyPath[2]
      ].selected = false;
      //异步调用ElmentUI table的方法把选中样式进行绑定
      setTimeout(() => {
        //获取当前已经选中的商品
        this.$refs.multipleShop.toggleRowSelection(
          this.shopData[itemkeyPath[0]].children[itemkeyPath[1]].children[
            itemkeyPath[2]
          ]
        );
      }, 0);
    },
    //商品和服务点击确定
    serveShopEnSure() {
      //将商品和服务的内容保存到本地存储
      let content = [...this.selectedItemServe, ...this.selectedItemShop];
      let obj = JSON.parse(localStorage.getItem(this.name));
      obj.content = content;
      localStorage.setItem(this.name, JSON.stringify(obj));
      console.log(JSON.parse(localStorage.getItem(this.name)))
    },
    //优惠券点击确认
    discountEnSure(){
      let discount = this.checkList;
      let obj = JSON.parse(localStorage.getItem(this.name));
      obj.discount = discount;
      localStorage.setItem(this.name, JSON.stringify(obj));
      console.log(JSON.parse(localStorage.getItem(this.name)))
    },
    //当奖品数量方发生改变时
    handleChange() {
      if (this.item1Num != undefined) {
        let obj = JSON.parse(localStorage.getItem(this.name));
        obj.num = this.item1Num;
        localStorage.setItem(this.name, JSON.stringify(obj));
      }
       console.log(JSON.parse(localStorage.getItem(this.name)))
    },
    //当中奖概率发生改变时
    probabilityChange(){
      let obj = JSON.parse(localStorage.getItem(this.name));
      obj.probability=this.item1probability;
      localStorage.setItem(this.name, JSON.stringify(obj));
      console.log(JSON.parse(localStorage.getItem(this.name)))
    }
  },
  created() {
    //组建创建时就在localStorage创建对象
    this.name = this.vip ? "vip" + this.num : "notvip" + this.num;
    let obj = JSON.stringify({
      content: "",
      discount:"",
      probability: "",
      num: "",
      type:"优惠券"
    });
    localStorage.setItem(this.name, obj);
    console.log(localStorage);
  },
};
</script>

<style scoped>
.listItem {
  display: grid;
  grid-template-columns: 8% repeat(4, 23%);
  padding: 10px 0;
  place-items: center;
  border-bottom: 1px solid #cdcdcd;
}
.listContent /deep/ .el-input__inner {
  text-align: center;
}
.popTypeOne /deep/ .el-dialog__header {
  background: cornflowerblue;
  padding: 20px;
}
.popTypeOne /deep/ .el-dialog__close.el-icon.el-icon-close {
  color: white;
  font-size: 18px;
}
.probabilityIcon {
  display: inline-block;
  position: absolute;
  font-size: 20px;
  right: 10px;
  height: 30px;
  top: 50%;
  margin-top: -15px;
}
.giftNameDetail {
  padding: 6px 20px;
  border: 1px solid #cdcdcd;
  width: 150px;
  text-align: center;
}
.popSetDiscount {
  overflow: hidden;
}
.popDiscountLeft {
  width: 45%;
  float: left;
  box-sizing: border-box;
  border-right: 1px solid #cdcdcd;
}
.popDiscountRight {
  width: 55%;
  box-sizing: border-box;
  float: right;
}
.popDiscountLeft /deep/ .el-input__inner {
  padding: 10px 20px;
  box-sizing: border-box;
}
.searchDiscountInputDiv,
.checkedTitle {
  height: 50px;
  line-height: 50px;
  padding: 10px 20px;
}
.searchDiscountInputDiv {
  background: #cdcdcd;
}
.vipsetlist /deep/ .el-dialog__footer {
  text-align: right;
}
.checkListDiv .elcheckbox {
  position: relative;
}
.checkListDiv .elcheckbox /deep/.el-checkbox {
  width: 100%;
  height: 28px;
  line-height: 28px;
}
.checkListDiv /deep/ .el-checkbox__input {
  position: absolute;
  right: 20px;
  top: 7px;
}
.checkListDiv /deep/ .el-checkbox__label {
  padding-left: 20px;
}
.popDiscountRight .checkedList > div {
  padding: 0 20px;
  height: 28px;
  line-height: 28px;
  position: relative;
}
.popDiscountRight .checkedList > div .el-icon-close {
  position: absolute;
  right: 0;
  top: 7px;
}
.checkListDiv,
.checkedList {
  min-height: 200px;
}
.popSetDiscount .footerButton {
  padding-right: 20px;
  text-align: right;
}
.popTypeTwo /deep/ .el-dialog__header {
  display: none;
}
.popTypeTwo /deep/ .el-dialog__body {
  overflow: hidden;
}
.popShopServeLeft {
  float: left;
  width: 70%;
}
.popShopServeRight {
  float: right;
  width: 30%;
  padding-bottom: 50px;
}
.popShopServeRightHead {
  height: 40px;
  line-height: 40px;
  position: relative;
}
.popShopServeRightHead .closeIcon {
  position: absolute;
  top: -5px;
  right: 0;
  font-size: 20px;
  cursor: pointer;
}
.popShopServeRight .twoBtn {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 20px 30px 0;
}
.popShopServeLeft /deep/ .el-menu-item {
  min-width: auto;
  width: 100%;
}
.popShopServeLeft .shopServeDetailList {
  width: 70%;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  right: 0;
  overflow: hidden;
  height: 500px;
}
.shopServeDetailList {
  width: 100%;
}

.el-tab-pane {
  display: flex;
}
/deep/ .el-table .cell {
  text-align: center !important;
}

/deep/ .el-table-column--selection.is-leaf .el-checkbox {
  display: none !important;
}

.selectedItem {
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}
.selectedItem .del {
  cursor: pointer;
}



</style>
